<template>
	<view style="height: 100vh">
		<Title :serach="serach" :item="item"></Title>
		<view class="remen">
			<view class="item_title">热门搜索</view>
			<view class="item">1111</view>
			<view class="item">22222</view>
			<view class="item">3333</view>
			<view class="item">4</view>
			<view class="item">走</view>
			<view class="item">视刻</view>
			<view class="item">？？？？</view>
		</view>
		<view class="remen">
			<view class="item_title">
				搜索记录
				<uni-icons type="trash" size="30" color="white" @click="del"></uni-icons>
			</view>
			<!-- 			<view style="color: white; width: 100%; font-size: 30px; font-weight: 700; display: flex; justify-content: center" v-show="serachdata.length <= 0">暂无搜索记录</view> -->
			<view class="item" v-for="i in serachdata" key="i" v-show="serachdata.length > 0" @click="fuzhi(i)">{{ i }}</view>
		</view>
		<wd-toast />
	</view>
</template>

<script setup lang="ts">
import Title from '../Component/search_title.vue';
import { ref, onMounted } from 'vue';
let serachdata = ref([]);
onMounted(() => {
	serachdata.value = JSON.parse(localStorage.getItem('serach'));
});
// 将搜索内容存储到本地
const serach = (item: string) => {
	let data = JSON.parse(localStorage.getItem('serach'));
	if (data == null) {
		let serachdata = [];
		serachdata.push(item);
		localStorage.setItem('serach', JSON.stringify(serachdata));
		serachdata.values = localStorage.getItem('serach');
	} else {
		let a = data.filter((it) => it == item);
		if (a == '') {
			data.push(item);
			localStorage.setItem('serach', JSON.stringify(data));
			serachdata.values = localStorage.getItem('serach');
		}
	}
};
let item = ref('');
let fuzhi = (i) => {
	item.value = i;
};
// 清空搜索内容
const del = () => {
	localStorage.removeItem('serach');
};
</script>

<style scoped lang="scss">
view {
	background-color: black;
}
.title {
	width: 100vw;
	display: flex;
	background-color: black;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.remen {
	width: 100vw;
	.item_title {
		padding: 10px;
		color: white;
		font-size: 20px;
		font-weight: 700;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.item {
		display: inline-block;
		color: white;
		padding: 10px;
		border-radius: 10px;
		margin: 7px;
		background-color: rgb(202, 217, 219);
	}
}
</style>
